import { Drawer, Row, Image } from 'antd';
import { useEffect, useState } from 'react';
import CustomMenu from './component/menu';
import { lists as getLists } from '@/services/blog/category';

export default (prods) => {
  const [mode, handleMode] = useState(prods.mode);
  const [treeData, handleTreeData] = useState(prods.data);
  useEffect(() => {
    const asyncFn = async () => {
      const res = await getLists({});
      if (res.code !== '200') {
        return [];
      }
      const blogRouteFun = function (list) {
        const data = list.map((item) => {
          const routeData = {
            icon: 'Contacts',
            name: item.name,
            path: '/list/' + item.id,
            children: [],
          };
          if (item.children) {
            routeData.children = blogRouteFun(item.children);
          }
          return routeData;
        });
        return data;
      };
      const data = blogRouteFun(res.data.list);
      const newMenuData = [];
      for (let dataIndex in data) {
        newMenuData.push(data[dataIndex]);
      }
      handleTreeData(newMenuData.concat(treeData));
    };
    asyncFn();
  }, []);

  return (
    <Row>
      <CustomMenu mode={mode} data={treeData}></CustomMenu>
    </Row>
  );
};
